<template>
	<div class="addProject business-workAdd">
		<div class="addForm zll-form">
			<el-form :model="addForm" :rules="rules" ref="addForm" class="demo-ruleForm">
				<el-row :gutter="40">
					<el-col :span="8">
						<el-form-item class="formList" prop="data9" label="采购号：">
							<el-input clearable class="input_right" v-model="addForm.procureCode" disabled></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="40">
					<el-col :span="8">
						<el-form-item class="formList" prop="data1" label="采购类型：" >
							<el-select clearable class="input_right" v-model="addForm.procureType" disabled>
								<el-option label="合同" value="1"></el-option>
								<el-option label="报销" value="2"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item class="formList" prop="data2" label="大类：">
							<el-input clearable class="input_right" v-model="addForm.processName" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="formList" prop="data3" label="采购日期：">
							<el-input clearable class="input_right" v-model="addForm.procureTime" disabled></el-input>
						</el-form-item>
						<el-form-item class="formList" prop="data4" label="供应商：">
							<el-input clearable class="input_right" v-model="addForm.supplier" disabled></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="8">
						<el-form-item class="formList" prop="data5" label="状态：">
							<el-input clearable class="input_right" v-model="addForm.procureStatusCn" disabled></el-input>
						</el-form-item>
						<el-form-item class="formList" prop="data6" label="采购人：">
							<el-input clearable class="input_right" v-model="addForm.procureUser" disabled></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<div class="nav_list">
					<div class="tableList" style="margin-top: 0;">
						<table border="1">
							<tr>
								<th width="40">序号</th>
								<th>品类</th>
								<th>物料代码</th>
								<th>物料名称</th>
								<th width="150">品牌/规格</th>
								<th>单位</th>
								<th>单价</th>
								<th>合计</th>
								<th>收货状态</th>
								<th>已入库</th>
								<th>待收货</th>
								<th>入库明细</th>
							</tr>
							<tr class="add_Table" v-for="(item, index) in procureStorages" :key="item.id">
								<td><p>{{ index + 1 }}</p></td>
								<td><p>{{ item.itemAlias }}</p></td>
								<td><p>{{ item.materialCode }}</p></td>
								<td><p>{{ item.materialName }}</p></td>
								<td><p>{{ item.materialGrade }}</p></td>
								<td><p>{{ item.measureUnit }}</p></td>
								<td><p>{{ item.procurePrice }}</p></td>
								<td><p>{{ item.procureTotalPrice }}</p></td>
								<td><p>{{ item.storageStatusCn }}</p></td>
								<td><p>{{ item.procureExistCount||'0' }}</p></td>
								<td><p>{{ item.procureLeftCount }}</p></td>
								<td><p @click="goDetail(item)" class="edit_">查看</p></td>
							</tr>
						</table>
					</div>
				</div>
				<div class="nav_list">
					<div class="_title">
						<span><i class="iconfont icon-gongxiangtuopaniconshangchuan-"></i>结算支付</span>
					</div>
					<div class="tableList" style="margin-top: 0;" v-loading="payLoading">
						<table border="1">
							<tr>
								<th>付款日期</th>
								<th>付款方式</th>
								<th>付款金额</th>
								<th>备注</th>
								<th>确认人</th>
								<th width="80"></th>
							</tr>
							<tr class="add_Table" v-for="(pay,payIndex) in procureCloses" :key="payIndex">
								<td>
									<el-input v-model="pay.createTimeFt" placeholder="" class="text_center" clearable
											  disabled></el-input>
								</td>
								<td>
									<el-select clearable class="input_right" v-model="pay.closePayType" :disabled="pay.addFlag!='1'">
										<el-option label="对公" value="对公"></el-option>
										<el-option label="自付" value="自付"></el-option>
									</el-select>
								</td>
								<td>
									<el-input v-model="pay.closePayMoney" @input="pay.closePayMoney=pay.closePayMoney.replace(/[^0-9\.]/g,'')"  placeholder="" class="text_center" clearable
											  :disabled="pay.addFlag!='1'"></el-input>
								</td>
								<td>
									<el-input v-model="pay.remark" placeholder="" class="text_center" clearable
											  :disabled="pay.addFlag!='1'"></el-input>
								</td>
								<td><p>{{ pay.closePayName+'/'+pay.createTimeFt }}</p></td>
								<td >
									<p v-if="pay.addFlag =='1'" class="edit_" @click="submitPay">提交</p>
								</td>
							</tr>
						</table>
					</div>
					<div class="_line">
						<p class="_line_list">
							<span class="_left">采购总额：</span>
							<span class="_right">{{addForm.totalMoney}}</span>
						</p>
						<p class="_line_list">
							<span class="_left">已付款：</span>
							<span class="_right green">{{addForm.hasPayMoney}}</span>
						</p>
						<p class="_line_list">
							<span class="_left">未付款：</span>
							<span class="_right red">{{addForm.noPayMoney}}</span>
						</p>
						<p class="_line_list">
							<span class="_left">支付状态：</span>
							<span class="_right">{{ addForm.payStatusCn }}</span>
							<span v-if="type == 'edit' && addForm.payStatus =='0'" @click="jsCommit" class="_js zll-botton instorage">完成结算</span>
						</p>
					</div>
				</div>
			</el-form>
		</div>
		<!--- 入库明细---->
		<div class="zll-dialog">
			<el-dialog title="单品入库明细" width="500px"
					   :visible.sync="rkDetailDialog">
				<div class="main_contain_rk">
					<p class="_line_title">{{storageHistory.itemAlias}}，{{storageHistory.materialName}}（{{storageHistory.materialCode}}），{{storageHistory.materialGrade}}，{{storageHistory.procureCount}}（{{storageHistory.measureUnit}}）</p>
					<div class="tableList" style="margin-top: 0;">
						<table border="1">
							<tr>
								<th>入库号</th>
								<th>入库时间</th>
								<th>入库数量</th>
								<th>备注</th>
								<th>入库人</th>
							</tr>
							<tr class="add_Table" v-for="(item,index) in storageHistory.tableData" :key="index+999">
								<td><p>{{item.procureStorageCode}}</p></td>
								<td><p>{{item.createTimeFt}}</p></td>
								<td><p>{{item.storageCount}}</p></td>
								<td><p>{{item.remark}}</p></td>
								<td><p>{{item.storageUserName}}</p></td>
							</tr>
							<tr class="add_Table">
								<td colspan="2">合计：</td>
								<td>{{storageHistory.total}}</td>
								<td colspan="2"></td>
							</tr>
						</table>
					</div>
				</div>
				<span slot="footer" class="dialog-footer">
                    <p class="zll-botton Info" @click="rkDetailDialog = false">关 闭</p>
                </span>
			</el-dialog>
		</div>

		<!--- 完成结算---->
		<div class="zll-dialog">
			<el-dialog title="完成结算" width="400px"
					   :visible.sync="jsDialog">
				<div class="main_contain_rk main_contain_js">
					<p class="_line_title">您有未支付款项</p>
					<p class="_line_title">完成结算即关闭“支付录入”，请慎重操作</p>
					<div style="margin-top: 15px;">
						<el-input v-model="bz" placeholder="请输入备注说明" class="text_center" clearable></el-input>
					</div>
				</div>
				<span slot="footer" class="dialog-footer">
                    <p class="zll-botton Info" @click="jsDialog = false">关 闭</p>
                    <p class="zll-botton" @click="finishJs">完 成</p>
                </span>
			</el-dialog>
		</div>
	</div>
</template>
<script>
	import {getStore} from "@/plugins/localStore";
	import {formatDate} from "@/plugins/formatDate";

	export default {
		props: ['editData', 'type'],
		data() {
			return {
				rkDetailDialog: false,
				jsDialog: false,
				bz:'',
				addForm: {

				},
				procureStorages:[],
				procureCloses:[],
				tableData:[],
				rules: {},

				payLoading:false,
				storageHistory:{tableData:[],total:'',procureCount:'',measureUnit:'',materialGrade:'',materialCode:'',materialName:'',itemAlias:''},
			}
		},
		methods: {
			goDetail(item) {
				this.getProcureStorageHistoryList(item);
			},
			jsCommit() {
				this.jsDialog = true;

			},
			finishJs() {
				let self = this;
				self.$http({
					url: "/jinl/procure/updateCompletePayProcure",
					method: "post",
					params:{id:self.addForm.id,remark:self.bz,surePayUser:getStore().userName}
				}).then(resp => {
					if (resp.success) {
						self.jsDialog = false;
						self.$message.success('确认采购支付完成！');
						self.$eventBus.$emit('updateProcureList');
						// self.addForm.payStatus = '1';
						// self.addForm.payStatusCn = '已支付';
						// for(let data of self.procureCloses){
						// 	data.addFlag = '0';
						// }
						return;
					}
					self.$message.error(resp.message)
				});
			},

			getProcureStorageHistoryList(item) {
				let self = this;
				self.$http({
					url: "/jinl/procureStorage/getProcureStorageHistoryList",
					method: "post",
					params:{id:item.id}
				}).then(resp => {
					self.rkDetailDialog = true;
					if (resp.success) {
						let total = 0;
						for(let data of resp.result){
							total+=parseInt(data.storageCount);
						}
						self.storageHistory.procureCount = item.procureCount;
						self.storageHistory.measureUnit = item.measureUnit;
						self.storageHistory.materialGrade = item.materialGrade;
						self.storageHistory.materialCode = item.materialCode;
						self.storageHistory.materialName = item.materialName;
						self.storageHistory.itemAlias = item.itemAlias;
						self.storageHistory.total = total;
						self.storageHistory.tableData =  JSON.parse(JSON.stringify(resp.result));
						return;
					}
					self.$message.error(resp.message)
				});
			},

			submitPay(){
				let self = this;
				let payInfo = self.procureCloses.find((item) => item.addFlag == '1');
				if(!payInfo.closePayType){
					self.$message.warning('请选择支付方式');
					return;
				}
				if(!payInfo.closePayMoney){
					self.$message.warning('请输入支付金额');
					return;
				}
				self.payLoading = true;
				self.$http({
					url: "/jinl/procureClose/addProcureClose",
					method: "post",
					params:payInfo
				}).then(resp => {
					if (resp.success) {
						self.getProcureCloseList(payInfo);
						return;
					}
					self.payLoading = false;
					self.$message.error(resp.message)
				});
			},

			getProcureCloseList(payInfo) {
				let self = this;
				self.$http({
					url: "/jinl/procureClose/getProcureCloseList",
					method: "post",
					params:{procureId:payInfo.procureId}
				}).then(resp => {
					self.payLoading = false;
					if (resp.success) {
						self.procureCloses = JSON.parse(JSON.stringify(resp.result));
						let time = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
						self.procureCloses.push({procureId:payInfo.procureId,closePayName:getStore().userName,closePayMoney:'',remark:'',closePayType:'',createTimeFt:time,addFlag:'1'});

						let hasPayMoney = parseFloat(self.addForm.hasPayMoney) + parseFloat(payInfo.closePayMoney);
						self.addForm.hasPayMoney = hasPayMoney.toFixed(2);
						console.log('hasPayMoney:'+hasPayMoney)
						let totalMoney = parseFloat(self.addForm.totalMoney);
						console.log('totalMoney:'+totalMoney)
						let noPayMoney = totalMoney - hasPayMoney;
						console.log('noPayMoney:'+noPayMoney)
						self.addForm.noPayMoney = noPayMoney.toFixed(2)+'';
					}
				});
			},

		},

		watch:{
			editData(val) {
				console.log('======editData=========')
				console.log(val)
				this.procureStorages = JSON.parse(JSON.stringify(val.procureStorages||[]));
				this.procureCloses = JSON.parse(JSON.stringify(val.procureCloses||[]));
				if(val.payStatus == '0' && this.type == 'edit'){
					let time = formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
					this.procureCloses.push({procureId:val.id,closePayName:getStore().userName,closePayMoney:'',remark:'',closePayType:'',createTimeFt:time,addFlag:'1'});
				}
				for(let data of this.procureStorages){
					let procureCount = data.procureCount||'0';
					let procureExistCount = data.procureExistCount||'0';
					let procureLeftCount = parseInt(procureCount) - parseInt(procureExistCount);
					data.procureLeftCount = procureLeftCount;
				}
				this.addForm = val;
			},
		},

		mounted() {
		},
		components: {},
	}
</script>
<style lang="scss" scoped>
	@import "@/style/dialog.scss";

	.main_contain_rk {
		padding: 30px;

		._line_title {
			line-height: 40px;
		}

		&.main_contain_js {
			._line_title {
				line-height: 26px;
				color: #f44336;
				text-align: center;
			}
		}
	}

	.formList {
		margin-bottom: 8px !important;
	}

	._line {
		margin-top: 10px;

		._line_list {
			line-height: 30px;
			position: relative;
			text-align: center;
			background: #ddd;
			border-bottom: 1px solid #ffffff;

			._left {
				color: #8a8a8a;
				display: inline-block;
				width: 100px;
			}

			._right {
				width: 100px;
				display: inline-block;

				&.green {
					color: #4CAF50;
				}

				&.red {
					color: #f44336;
				}
			}

			._js {
				position: absolute;
				right: 20px;
				top: 2px;
				width: 80px;
				height: 26px;
				line-height: 26px;
			}
		}
	}

	.nav_list {
		margin-top: 20px;

		._title {
			line-height: 40px;
			color: #00D1D0;
			display: flex;
			justify-content: space-between;

			i {
				font-size: 16px;
				margin-right: 5px;
			}

			.void {
				margin-left: 20px;
				height: 26px;
				line-height: 26px;
				padding: 0 20px;
			}
		}

		.edit_ {
			color: #409EFF;
			cursor: pointer;
		}
	}

	.edit {
		color: #409EFF;
		cursor: pointer;
	}

	.dialog-footer {
		display: flex;
		justify-content: center;

		.zll-botton {
			margin: 0 15px;
		}
	}
</style>